iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
0
DevOps

持續測試三十天系列 第 14

[Day 14] 用 TestCafe 三神器 SAA 自動化測試填表單

  • 分享至 

  • xImage
  •  

今天我們實際使用 TestCafe 三神器 Selectors, Actions, Assertions
實作一個簡單的自動化測試,填寫 TestCafe Example Page 表單

整個自動化測試流程需完成以下步驟:

  1. 進入 TestCafe Example Page
  2. Your name 輸入 ice
  3. Which features are important to you 勾選 Support for testing on remote devices
  4. What is your primary Operating System 選取 MacOS
  5. Which TestCafe interface do you use 下拉選取 Both
  6. 按下 Submit 按鈕
  7. 確認結果等於 Thank you, ice!

完整的程式碼可以參考 Github CT30 day14,內附精美註解說明和多種 Selector 選擇法。

拿掉所有註解和不必要的程式碼,其實程式碼很簡單也沒幾行!
這也體現了 TestCafe 的 API 很簡單。

import { Selector } from "testcafe";

fixture`Getting Started`.page`http://devexpress.github.io/testcafe/example`;

test("Example Page Test", async t => {
  
  const supportRemoteBox = Selector("#remote-testing");
  const macOSRadio = Selector(".column")
    .find("label")
    .withText("MacOS")
    .child("input");
  const interfaceSelect = Selector("#preferred-interface");

  await t
    .typeText("#developer-name", "ice")
    .click(supportRemoteBox)
    .click(macOSRadio)
    .click(interfaceSelect)
    .click(interfaceSelect.find("option").withText("Both"))
    .click("#submit-button")
    .expect(Selector("#article-header").innerText)
    .eql("Thank you, ice!");
});

實際執行上述程式碼的話,應該會開始進行預定的步驟 1 ~ 7。

cd day14

testcafe chrome TestCafeExamplePage.js --speed 0.3

TestCafe 自動化測試實際跑起來的效果

Yes


完整程式碼

步驟 5.1 and 5.2 是重點,請參照上面的教學影片!

import { Selector } from "testcafe"; // 引入 testcafe 的 html element 選擇器

fixture`Getting Started`.page`http://devexpress.github.io/testcafe/example`; // 1. 進入 TestCafe Example Page

test("Example Page Test", async t => {
  // Chrome Copy selector 定位法
  const supportRemoteBox = Selector("#remote-testing");

  // Chrome Copy XPath 定位法
  // const supportRemoteBox = Selector('*[id="remote-testing"]');

  // 使用 TestCafe 鏈式 Selector API
  const macOSRadio = Selector(".column")
    .find("label")
    .withText("MacOS")
    .child("input");

  // Chrome Copy selector 定位法
  // const macOSRadio = Selector('#macos');

  const interfaceSelect = Selector("#preferred-interface");

  await t
    // 2. 直接使用 html element id,識別 input 在 Your name 輸入 ice
    .typeText("#developer-name", "ice")
    // 3. 透過預定義 selector supportRemoteBox,選 testing on remote devices
    .click(supportRemoteBox)
    // 4. 透過預定義的 selector macOSRadio 選擇 MacOS
    .click(macOSRadio)
    // 5.1 透過預定義的 selector interfaceSelect,按下選單彈出選項
    .click(interfaceSelect)
    // 5.2 使用 TestCafe 鏈式 Selector API,找到 interfaceSelect 下的 Both Option
    .click(interfaceSelect.find("option").withText("Both"))
    // 6. 按下 Submit 按鈕
    .click("#submit-button")
    // 7. 確認結果等於 Thank you, ice!
    .expect(Selector("#article-header").innerText)
    .eql("Thank you, ice!");
});

上一篇
[Day 13] TestCafe 測試流程三神器 SAA
下一篇
[Day 15] 世界上沒有一個瀏覽器解決不了的事,如果有那跑兩個!
系列文
持續測試三十天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言